<template>
  <!-- 等级评定检查详情页  -->
  <view class="ratingDetail">
    <view class="wrapper">
      <view class="wrapper-item wrapper-zero">
        <view class="facility-item" style="padding-bottom: 30rpx">
          <view class="line-hidden nameTitle">
            {{ options.restaurantName }}
          </view>
        </view>

        <view class="wrapper-facility">
          <view class="facility-item">
            <view class="textAlign label">餐厅负责人：</view>
            <view class="value valueName">
              {{ options.restaurantChargeName || "" }}
            </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label">联系电话：</view>
            <view class="value valueName">
              {{ options.restaurantChargePhone || "" }}
            </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label">营业地址：</view>
            <view class="value valueName">
              {{ options.restaurantAddress || "" }}
            </view>
          </view>
        </view>
      </view>

      <view
        class="wrapper-item wrapper-zero"
        style="padding: 35rpx 40rpx 30rpx"
      >
        <view class="topic">
          <image
            :src="baseImgUrl + 'record-icon.png'"
            mode="aspectFill"
          ></image>
          评定记录
        </view>

        <view class="wrapper-facility">
          <view class="facility-item">
            <view class="textAlign label">评定时间：</view>
            <view class="value valueName">
              {{ formatters(options.createTime, "YY-MM-DD HH:mm") }}
            </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label">现场照片：</view>
            <view
              class="value valueName look"
              @click="pvwImage([imgPrefix + options.sceneImage])"
            >
              查看
            </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label">评定队员：</view>
            <view class="value valueName">
              {{ options.personName }}
              <block v-if="options.personNameList.length">、</block>
              {{ options.personNameList }}
            </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label">评定结果：</view>
            <view
              class="value valueName"
              :style="{
                color:
                  options.gradeStatus == 1
                    ? '#0CAD83'
                    : options.gradeStatus == 2
                    ? '#FFBB01'
                    : '#F23124',
              }"
            >
              {{
                options.gradeStatus == 1
                  ? "A"
                  : options.gradeStatus == 2
                  ? "B"
                  : "C"
              }}级
            </view>
            <view
              v-if="options.gradeStatus != 1"
              class="look lookLink"
              :data-url="`/ratingExamine/ratingDetail/ratingResult?taskId=${options.id}`"
              @click="handleClickRouter"
            >
              查看详情>
            </view>
          </view>

          <view class="signature">
            <view>责任人签名：</view>
            <image
              :src="
                options.signatureImage
                  ? imgPrefix + options.signatureImage
                  : baseImgUrl + 'perDefault.png'
              "
              mode="aspectFill"
            ></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { handleClickRouter, pvwImage, formatters } from "@/utils/util.js";

export default {
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      imgPrefix: uni.getStorageSync("imgPrefix"),
      options: {},
    };
  },
  onLoad(options) {
    this.options = JSON.parse(decodeURIComponent(options.data));
  },
  onShow() {},
  methods: {
    handleClickRouter,
    pvwImage,
    formatters,
  },
};
</script>

<style>
page {
  background-color: #f8f9fb !important;
  height: 100%;
}
</style>
<style lang="scss" scoped>
.ratingDetail {
  flex: 1;
  background-color: #f8f9fb;
  margin-bottom: 50px;

  .wrapper {
    position: absolute;
    top: 20rpx;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 50px;
    height: calc(100vh - 74px);
    overflow-y: auto;

    .wrapper-item {
      margin-bottom: 2vh;
      padding: 35rpx 40rpx 10rpx;
      background-color: #ffffff;
      border-radius: 10rpx;
      width: 702rpx;

      .nameTitle {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: bold;
      }

      .topic {
        display: flex;
        margin-bottom: 30rpx;
        font-size: 30rpx;
        font-weight: bold;
        color: #030303;

        image {
          margin-right: 10rpx;
          margin-top: 5rpx;
          width: 30rpx;
          height: 28rpx;
        }
      }

      .wrapper-bar {
        display: flex;
        justify-content: space-between;
        height: 40rpx;
        .wrapper-bartitle {
          font-size: 30rpx;
          font-weight: bold;
          text {
            display: inline-block;
            margin-left: 8px;
            color: #ababab;
            font-size: 28rpx;
          }
        }
      }
    }

    .wrapper-zero {
      .timeout {
        display: inline-block;
        margin-right: 8rpx;
        padding: 2rpx 8rpx;
        font-size: 26rpx;
        font-weight: 400;
        border-radius: 8rpx;
      }

      .label {
        width: auto;
      }

      .bottomClass {
        margin-bottom: 25rpx;
      }
    }
  }
}
</style>
